﻿
$(document).ready(function(){ 
    $(".nav a").each(function(){ 
      $this = $(this); 
      if($this[0].href==String(window.location)){ 
        $this.parent('li').addClass("current").siblings().removeClass('current'); 
      } 
    }); 
  }); 


var loadImg = (function() {
    loaded = 0;
    return function(res, callback) {
        if ($.isArray(res)) {
            for (var i = 0, l = res.length; i < l; i++) {
                var img = new Image();
                img.src = res[i];
                img.onload = function() {
                    loaded++;
                    if (loaded == res.length) {
                        loaded = 0;
                        $.isFunction(callback) && callback();
                    }
                }
            }
        }
    }
})();

function DropWater(ele) {
    this.ele = $(ele).find(".scroll-wrap");
    this.waterArray = [];
    this.waterMinNum = 10;
    this.waterProArr = [{ id: 1, width: 42, left: 0 }, { id: 2, width: 42, left: 194 }, { id: 3, width: 42, left: 300 }, { id: 4, width: 42, left: 300 }, { id: 5, width: 42, left: 322 }, { id: 6, width: 42, left: 500 }, { id: 7, width: 42, left: 650 }, { id: 8, width: 42, left: 724 }, { id: 9, width: 42, left: 796 }, { id: 10, width: 42, left: 1072 }, { id: 11, width: 42, left: 1138 }, { id: 12, width: 26, left: 124 }, { id: 13, width: 26, left: 256 }, { id: 14, width: 30, left: 392 }, { id: 15, width: 30, left: 612 }, { id: 16, width: 30, left: 868 }, { id: 17, width: 42, left: 1138 }, { id: 18, width: 32, left: 974 }, { id: 19, width: 30, left: 934 }, { id: 20, width: 30, left: 1030 }, { id: 21, width: 30, left: 612 }, { id: 22, width: 30, left: 1130 }, { id: 23, width: 42, left: 1238 }, { id: 24, width: 32, left: 1452 }, { id: 25, width: 30, left: 1900 }, { id: 26, width: 30, left: 1700 }, { id: 27, width: 42, left: 1238 }, { id: 28, width: 32, left: 1572 }, { id: 29, width: 30, left: 1840 }, { id: 30, width: 30, left: 1760 }]
    this.containerHeight = this.ele.height();
    this.topRange = [0, 510];
    this.bottomRange = [100, 804];
    this.waterProArr2 = [];
    this.startTime = (new Date()).getTime();
    this.makeTime = 4000;
    this.init();
}
DropWater.prototype = {
    init: function() {
        var _this = this;
        setInterval(function() { _this.run(); }, 30);
        setInterval(function() { _this.makeDropWater(); }, 4000)
    },
    clone: function(o) {
        var _this = this,
            k, ret = o,
            b;
        if (o && ((b = o instanceof Array) || o instanceof Object)) {
            ret = b ? [] : {};
            for (k in o) {
                if (o.hasOwnProperty(k)) { ret[k] = _this.clone(o[k]); }
            }
        }
        return ret;
    },
    getRandArr: function(arr, n) {
        var newArr = [];
        rand(n);

        function rand(k) {
            if (k == 0) {
                return;
            }
            var index = Math.floor(Math.random() * arr.length);
            var flag = true;
            $.each(newArr, function(a, b) {
                if (newArr[a]["id"] == arr[index]["id"]) { flag = false; }
            });
            if (flag) {
                newArr.push(arr[index]);
                k--;
            }
            rand(k);
        }
        return newArr;
    },
    getdifArr: function(arr1, arr2) {
        var c = [];
        var tmp = arr1.concat(arr2);
        var o = {};
        for (var i = 0; i < tmp.length; i++) { tmp[i]["id"] in o ? o[tmp[i]["id"]]++ : o[tmp[i]["id"]] = 1; }
        for (x in o)
            if (o[x] == 1) { c.push(x); }
        var newArr = [];
        for (var i = 0; i < tmp.length; i++) {
            for (var j = 0; j < c.length; j++) {
                if (tmp[i]["id"] == c[j]) { newArr.push(tmp[i]); }
            }
        }
        return newArr;
    },
    getArr: function(arr) {
        return arr[Math.floor(Math.random() * arr.length)]
    },
    run: function() { this.moveWater(); },
    remove: function(ele) {
        for (var i = 0; i < this.waterArray.length; i++) {
            if (this.waterArray[i] == ele) {
                this.waterArray.splice(i, 1);
                break;
            }
        }
        for (var i = 0; i < this.waterProArr2.length; i++) {
            if (this.waterProArr2[i].id == ele.attr("data-id")) {
                this.waterProArr2.splice(i, 1);
                break;
            }
        }
    },
    moveWater: function() {
        var _this = this;
        if (this.waterArray.length == 0) {
            return
        }
        for (var i = 0, l = this.waterArray.length; i < l; i++) {
            var ele = this.waterArray[i]
            var speed = parseInt(ele.attr("speed"));
            var targetTop = ele.attr("targetTop");
            var top = parseInt(ele.css("top"));
            var date = +new Date();
            if (top >= targetTop) {
                (function(ele) {
                    ele.animate({ top: "+=100", opacity: "0" }, 1000, function() {
                        ele.remove();
                        _this.remove(ele);
                    })
                })(this.waterArray[i]);
            } else {
                if (date >= parseInt(ele.attr("date")) + parseInt(ele.attr("delay"))) {
                    if (ele.css("opacity") < 0.8) {
                        var opacity = (ele.css("opacity") * 10 + 1) / 10;
                        ele.css({ opacity: opacity })
                    } else { this.waterArray[i].css({ top: top + speed }); }
                }
            }
        }
    },
    randomRange: function(n, m) {
        return parseInt(Math.random() * (n - m) + m)
    },
    makeDropWater: function() {
        var waterEle = $('<div class="drop"><img alt="" src="/static/web/jingpeng/img/water.png"></div>');
        var top = this.randomRange(this.topRange[0], this.topRange[0] + this.topRange[1]);
        var targetTop = this.randomRange(this.containerHeight - (this.bottomRange[0] + this.bottomRange[1]), this.containerHeight - (this.bottomRange[0] + this.bottomRange[1]) + this.bottomRange[1]);
        var difArr = this.getdifArr(this.waterProArr, this.waterProArr2);
        var randArr = this.getArr(this.waterProArr);
        var speed = this.randomRange(1, 4) * randArr.width / 20;
        var delay = parseInt(Math.random() * 5000);
        var date = +(new Date());
        if (this.waterArray.length >= 20) {
            return
        }
        this.waterProArr2.push(randArr);
        waterEle.css({ top: top, left: randArr.left, opacity: 0, width: randArr.width }).attr({ delay: delay, date: date, targetTop: targetTop, speed: speed, "data-id": randArr.id, width: randArr.width });
        this.ele.append(waterEle);
        this.waterArray.push(waterEle);
    }
};
(function($) {
    var defaults = { width: 0, frames: 0, duration: 48, direction: 'forward', infinite: true };
    $.fn.spriteAnim = function(options) {
        options = $.extend({}, defaults, options);
        return this.each(function() {
            var elem = $(this),
                stepSize = options.width / options.frames,
                i = 0;
            (function loop() {
                elem[0].style.backgroundPosition = (options.direction === 'backward' ? '+' : '-') + (stepSize * i++) + 'px 0';
                var timeout = setTimeout(loop, options.duration);
                if (i >= options.frames) {
                    i = 0;
                    if (!options.infinite) clearTimeout(timeout);
                }
            })();
        });
    };
})(jQuery);
var indexListPic = $(".index-list-pic"),
    curDepTxt = $(".cur-dep-txt", indexListPic),
    mousewheelTip = $(".mousewheel-tip"),
    go2topExit = $(".go2top-exit", indexListPic),
    listPicNav = $(".list-pic-nav", indexListPic),
    go2topExit = $(".go2top-exit"),
    preScroll = false;
$(".btn-mousewheel-tip").find("i").spriteAnim({ width: 69, frames: 3, duration: 200 });

function showPageInfo() {
    curDepTxt.fadeIn();
    go2topExit.fadeIn();
    listPicNav.fadeIn();
    mousewheelTip.fadeIn();
}

function hidePageInfo() {
    curDepTxt.fadeOut();
    go2topExit.fadeOut();
    listPicNav.fadeOut();
    mousewheelTip.fadeOut();
}

function disableScroll() {
    var keys = { 37: !0, 38: !0, 39: !0, 40: !0 };
    $(window).on("mousewheel.disableScroll", function(e) { e.preventDefault(); });
    $(document).on("touchmove.disableScroll", function(e) { e.preventDefault(); });
    $(document).on("keydown.disableScroll", function(e) {
        if (keys[e.keyCode]) { e.preventDefault(); }
    })
}

function enableScroll() {
    $(window).off("mousewheel.disableScroll");
    $(document).off("touchmove.disableScroll");
    $(document).off("keydown.disableScroll");
}
loadImg(["/static/web/jingpeng/img/1.jpg", "/static/web/jingpeng/img/2.jpg", "/static/web/jingpeng/img/3.jpg", "/static/web/jingpeng/img/4.jpg", "/static/web/jingpeng/img/5.jpg", "/static/web/jingpeng/img/6.jpg", "/static/web/jingpeng/img/7.jpg", "/static/web/jingpeng/img/8.jpg", "/static/web/jingpeng/img/9.jpg", "/static/web/jingpeng/img/10.jpg", "/static/web/jingpeng/img/11.jpg", "/static/web/jingpeng/img/12.jpg", "/static/web/jingpeng/img/13.jpg"], function() {
    var str = '<div style="background:url(/static/web/jingpeng/img/1.jpg) no-repeat center 0;height:894px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/2.jpg) no-repeat center 0;height:611px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/3.jpg) no-repeat center 0;height:611px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/4.jpg) no-repeat center 0;height:596px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/5.jpg) no-repeat center 0;height:511px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/6.jpg) no-repeat center 0;height:590px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/7.jpg) no-repeat center 0;height:590px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/8.jpg) no-repeat center 0;height:902px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/9.jpg) no-repeat center 0;height:775px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/10.jpg) no-repeat center 0;height:826px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/11.jpg) no-repeat center 0;height:451px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/12.jpg) no-repeat center 0;height:646px;background-size:100% 100%"></div>' + '<div style="background:url(/static/web/jingpeng/img/13.jpg) no-repeat center 0;height:786px;background-size:100% 100%"><div class="layout"><div class="btn-wrap"></div></div></div>';
    $(".scroll-wrap", indexListPic).append(str);
    $(".btn-mousewheel-tip").css({ display: "block", right: -124 }).animate({ right: 32 }, 600).click((function() {
        $(".btn-mousewheel-tip").animate({ right: -124 }, 600);
        indexListPic.animate({ top: 0 }, 600, function() { showPageInfo(); });
        preScroll = true
    }));
    new DropWater(".index-list-pic");
    var layerInfo = [{ dep: 179, name: "沙土长石层", summary: "调节水质硬度<br />形成天然弱碱性" }, 
					 { dep: 610, name: "寒武岩层", summary: "50年矿化<br />蕴含丰富矿物质" }, 
					 { dep: 1900, name: "白云岩层", summary: "过滤水中碎石、沙粒" }, 
					 { dep: 2600, name: "断岩透水层", summary: "隔绝外界环境污染" }, 
					 { dep: 3800, name: "碎岩滤水层", summary: "隔绝外界环境污染" }, 
					 { dep: 5300, name: "片岩隔水层", summary: "隔绝外界环境污染" }]
    var curIndex = 0;
    var myMCustomScrollbar = indexListPic.mCustomScrollbar({
   mouseWheelPixels:200,
        callbacks: {
            whileScrolling: function(mcs) {
                var top = parseInt(6000 * Math.abs(mcs.top) / ($(".scroll-wrap", indexListPic).height() - $(window).height()))
                $(".dep").text(top);
                var index = 0;
                for (var i = 0; i < layerInfo.length; i++) {
                    if (Math.abs(mcs.top) >= layerInfo[i]["dep"]) { index = i; }
                }
                if (index != curIndex) {
                    curDepTxt.animate({ marginLeft: -200, opacity: 0 }, 1000, function() {
                        curDepTxt.css({ marginLeft: 200 })
                        curDepTxt.find(".txt1").html(layerInfo[index]["name"]);
                        $(".dep-name").html(layerInfo[index]["name"]);
                        curDepTxt.find(".txt2").html(layerInfo[index]["summary"]);
                        curDepTxt.animate({ marginLeft: 0, opacity: 1 }, 1000);
                    })
                }
                curIndex = index;
                if (top >= 5000) {
                    curDepTxt.css("visibility", "hidden")
                } else {
                    curDepTxt.css("visibility", "visible")
                }
                if (Math.abs(mcs.top) >= 100) { go2topExit.find(".go2top").fadeIn(); } else { go2topExit.find(".go2top").fadeOut(); }
            }
        }
    });
});
$(window).on("scroll", function(ev) {
    var scrollTop = $(this).scrollTop(),
        docHeight = $(document).height(),
        winHeight = $(window).height();
    if (scrollTop + winHeight >= docHeight) { $(".btn-mousewheel-tip").trigger("click") }
}).mousewheel(function(ev) {
    if (preScroll) { ev.preventDefault(); }
});
$(document).on("keydown", function(ev) {
    var keys = [37, 38, 39, 40];
    if (preScroll) {
        console.log(ev.keyCode)
        for (var i = 0; i < keys.length; i++) {
            if (keys[i] == ev.keyCode) {
                ev.preventDefault();
                return false
            }
        }
    }
});
go2topExit.find(".item").hover(function() {
    var obj = $(this).find(".txt-c"),
        objWidth;
    obj.css({ width: "auto" });
    objWidth = obj.width();
    obj.css({ width: 0 })
    obj.stop().animate({ width: objWidth });
}, function() { $(this).find(".txt-c").stop().animate({ width: 0 }) }).click(function() {
    if ($(this).hasClass("go2top")) { indexListPic.mCustomScrollbar("scrollTo", "top") } else {
        hidePageInfo();
        preScroll = false;
        indexListPic.animate({ top: "100%" }, 600, function() { $(".btn-mousewheel-tip").animate({ right: 32 }, 600) })
    }
});;
